import React, { useEffect, useRef } from "react";

import * as THREE from "three";

// 控制器的引用,
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

import "./index.scss";

export default (): JSX.Element => {
  const canvas = useRef<HTMLDivElement>(null)
  useEffect(() => {
    // ----------场景
    const scene = new THREE.Scene(); // 场景
    // const geometry = new THREE.SphereGeometry(60, 40, 40); // 创建几何球体
    const geometry = new THREE.BoxGeometry(100, 100, 100); // 创建几何立方体

    const material = new THREE.MeshLambertMaterial({ color: 0xff0000 }); // 材质对象
    const mesh = new THREE.Mesh(geometry, material); // 网格对象
    scene.add(mesh); // 将网格对象添加到场景中

    const point = new THREE.PointLight(0xffffff); // 点光源
    point.position.set(400, 200, 300); // 点光源位置
    scene.add(point); // 点光源添加到场景中

    const ambient = new THREE.AmbientLight(0x444444); // 环光源
    scene.add(ambient);

    // ----------相机
    const w = 400;
    const h = 400;
    const k = w / h;
    const s = 200; // 三维场景显示范围控制系数，越大显示范围越大
    const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); // 相机对象
    camera.position.set(200, 300, 200); // 相机位置
    camera.lookAt(scene.position); // 相机方向（横向场景对象）

    // ----------渲染器
    const renderer = new THREE.WebGL1Renderer();
    renderer.setSize(w, h); // 设置渲染区域尺寸
    // renderer.setClearColor(0xb9d3ff, 1); // 设置背景色默认黑色
    // try {
    //   canvas.current?.appendChild(renderer.domElement)
    // } catch (err) {
    //   document.body.appendChild(renderer.domElement)
    // }

    document.body.appendChild(renderer.domElement)

    function render() {
      renderer.render(scene, camera); // 通过场景和相机参数渲染
    }

    render(); // 控制器刚进来不会渲染需要先首次渲染

    // ----------控件器
    let constrol = new OrbitControls(camera, renderer.domElement);
    constrol.addEventListener("change", render);
  }, []);
  return (
    <div>
      <p>鼠标操作三维动画</p>
      <div ref={canvas}></div>
    </div>
  );
};
